<template>
  <div :id="this.id" class="node" @mouseup.prevent="updateXY" @dblclick.capture="openEdit($event)"
       :style="{left:step.x+'px',top:step.y+'px'}">
    <div class="close" @dblclick.stop @click.capture.stop="$emit('remove')"></div>
    <div class="step" :class="step.type"><span class="ep"></span></div>
    <div><p>{{step.name}}</p></div>
  </div>
</template>
<style scoped lang="scss">
  @import "../style/mixins";
  @import "../style/variables";

  .ep {
    display: block;
    width: $step-ep-width;
    height: $step-ep-height;
    margin: auto;
    cursor: alias;
    @include box-transition-shadow;
    &:hover {
      box-shadow: 0 0 6px black;
    }
  }

  .node {
    position: absolute;
    width: 100px;
    height: 90px;
    border: 2px solid #95B8E7;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: whitesmoke;
    @include box-transition-shadow;
    &:hover {
      border-color: #1f76e7;
      box-shadow: 2px 2px 19px #aaa;
      cursor: pointer;
    }
  }

  .close {
    z-index: 910;
    height: 20px;
    width: 20px;
    float: right;
    padding: 2px;
    background: url("../assets/steps/close-panel.png") center no-repeat;
    &:hover {
      background: url("../assets/steps/close-panel.png") rgba(92, 181, 232, 0.45) center no-repeat;
    }
  ;
    &:active {
      background: url("../assets/steps/close-panel.png") rgba(192, 181, 232, 0.45) center no-repeat;
    }
  }

  p {
    margin: 0;
    font-family: "sans-serif";
    text-align: center;
    font-size: 12px;
  }
</style>
<script>
  import store from "../store/store";
  import stepList from "./steps/list/stepList";
  import {mapState} from 'vuex';
  import debounce from "lodash/debounce";

  export default{
    props: ['id', 'index'],
    store,
    mounted: function () {
      //拖拽的初始化
      let el = this.$el;
      jsPlumb.draggable(el, {containment: true});
      jsPlumb.makeSource(el, {
        filter: ".ep",
        anchor: "Continuous",
        connectorStyle: {stroke: "#5c96bc", strokeWidth: 2, outlineStroke: "transparent", outlineWidth: 4},
        connectionType: "basic",
        maxConnections: -1,
        deleteEndpointsOnDetach: false
      });
      jsPlumb.makeTarget(el, {
        dropOptions: {hoverClass: "dragHover"},
        anchor: "Continuous",
        allowLoopback: false
      });
    },
    computed: mapState({
      step(){
        return this.$store.state.step.steps[this.id]
      }
    }),
    data: function () {
      return {};
    },
    methods: {
      trimDotAndPx(str){
          let index;
          if((index=str.search("\\."))!==-1){
              return str.substring(0,index)
          }
          else
              return str.replace("px","")
      },
      updateXY(){
        let x =this.trimDotAndPx (this.$el.style.left), y=this.trimDotAndPx(this.$el.style.top);
        this.$store.commit("updateXY", {id: this.$el.id, left: x, top: y});
      },
      openEdit: function () {
        if (stepList[this.step.type]) {
          this.$store.commit("openWin", {activeNode: this.id, currentView: this.step.type});
        }
        else
          alert("未注册的Step");
      }
    }
  };

</script>
